<template>
  <view>
    <u-navbar
        title="新手指南"
        placeholder
        titleStyle="color:white"
        leftIconColor="#fff"
        auto-back
        bgColor="#FA762B"
    >
    </u-navbar>
    <!--    <view style="height: 40rpx"></view>-->
    <!--    <view class="novice" style="background-color: #FA762B;padding-top: 60rpx">-->
    <!--      <view-->
    <!--          style="width: 80%;height: 80rpx;background-color: #ffd325;color:#242424;font-size:28rpx;font-weight:bold;margin: auto;border-radius: 60rpx;text-align: center;line-height: 80rpx;letter-spacing: 3rpx">-->
    <!--        点击获取美团账号-->
    <!--      </view>-->
    <!--    </view>-->
    <!--新手指南样式-->
    <view
        style="padding-top: 20rpx;padding-bottom:10rpx;left: 0;text-align: center;background-color: #FA762B;color: white"
        v-if="!userReader">
      {{ downTime === 0 ? '恭喜您获得100金币' : downTime + '秒后，获得100金币' }}
    </view>
    <view class="novice">
      <!--      <u-image mode="widthFix" width="750rpx" height="3000rpx" :src="BaseImgUrl + '/images/new_zn.png'" @load="loadSuccess"></u-image>-->
      <image mode="widthFix" :src="BaseImgUrl + '/images/new_zn.png'" @load="loadSuccess"></image>
      <text v-if="isLoad" @tap="playVideoFun" style="font-size: 30rpx;font-weight: bold">点击查看视频教程>></text>
    </view>
    <view class="videoBox" v-if="playVideo">
      <view @tap.stop="playVideoFun"></view>
      <video src="https://lsz.lszbg.com/imgs/images/new_video.mp4"></video>
    </view>
  </view>
</template>

<script setup>

import {BaseImgUrl} from "../../utils/lshttp";
import {ref} from "vue";
import {onAddToFavorites, onLoad, onShareAppMessage, onShareTimeline, onShow, onUnload} from "@dcloudio/uni-app";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
import {useUserInfoStore} from "../../stores/modules/userInfo";
import {addGoldCoinAPI, getCollectionDetailsAPI} from "../../services";

const playVideo = ref(false)
const isLoad = ref(false)
const playVideoFun = function () {
  playVideo.value = !playVideo.value
}
const commonInfoStore = useCommonInfoStore()
const useUser = useUserInfoStore()
const message = ref("领食霸王餐免费点外卖教程")
const downTime = ref(10)
const time = ref()
const userReader = ref() // 用户是否已读
onLoad(async () => {
  if (time.value) {
    clearInterval(time.value)
    downTime.value = 10
  }
  console.log('useUser.userInfo.is_sign', useUser.userInfo.is_sign)
  let res = await getCollectionDetailsAPI()
  userReader.value = res.result.newTutorial
  if (!userReader.value) {
    time.value = setInterval(async () => {
      downTime.value = downTime.value - 1
      if (downTime.value <= 0) {
        clearInterval(time.value)
        const res = await addGoldCoinAPI(6)
        uni.showToast({title: res.msg, icon: 'none', duration: 3800})
        // useUser.userInfo.is_sign = 1
      }
    }, 1000)
  }
})
onUnload(() => {
  clearInterval(time.value)
})
onShow(() => {
  commonInfoStore.setWxShareMessage("message", message.value, useUser.userInfo.id);
})

// 转发到聊天界面
onShareAppMessage(() => {
  return commonInfoStore.setWxShareMessage("message", message.value, useUser.userInfo.id);
})

// 转发到朋友圈
onShareTimeline(() => {
  return commonInfoStore.setWxShareMessage("friend", message.value, useUser.userInfo.id);
})
// 添加到收藏
onAddToFavorites(() => {
  return commonInfoStore.setWxShareMessage("favorite", message.value, useUser.userInfo.id);
})
const loadSuccess = () => {
  isLoad.value = true
}
</script>
<style lang="scss">
page {
  background-color: #F6F6F6;
}

.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #FA762B, #FA762B);
  color: rgb(36, 141, 241);
}
</style>
<style lang="scss" scoped>

.novice {
  margin: 0 auto;
  width: 100%;
  height: auto;
  padding: 0;
  position: relative;
}

.novice image {
  width: 750rpx;
  height: auto;
  border: 0;
  margin: 0;
  vertical-align: bottom;
}

.novice text {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff5a00;
  position: absolute;
  display: block;
  width: 100%;
  text-align: center;
  bottom: 2.1%;
}

.videoBox {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: fixed;
  left: 0;
  top: 0;
}

.videoBox view {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  left: 0;
  top: 0;
}

.videoBox video {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
